var appRoot = '#app';
if(document.getElementById(appRoot)){
    // // 不能使用 .value .val()
    // 直接换一级 不能深层替换
    // // 选择将观察突变的节点
    // var targetNode = document.getElementById('el-test');
    // // 观察者的选项(要观察哪些突变)
    // var config = { attributes: true, childList: true, subtree: true };
    // // 当观察到突变时执行的回调函数
    // var callback = function (mutationsList) {
    //   mutationsList.forEach(function (item, index) {
    //     if (item.type == 'childList') {
    //       console.log('有节点发生改变，当前节点的内容是：');
    //       console.log(item.target.innerHTML);
    //     } else if (item.type == 'attributes') {
    //       console.log('修改了' + item.attributeName + '属性');
    //     }
    //   });
    // };
    // // 创建一个链接到回调函数的观察者实例
    // var observer = new MutationObserver(callback);
    // // 开始观察已配置突变的目标节点
    // observer.observe(targetNode, config);
    // // 停止观察
    // //observer.disconnect();
    var vm = {
        el:"#app",
        data: {
            uanme: "",
            upass: "",
        },
        init: function(){
            this.addWatch(this.data, 'uname');
            this.addWatch(this.data, 'upass');
            this.addListener(this.bindAttr);
        },
        bindAttr: "bind-value",
        watch: function (obj, name, callback) {
            let value = obj[name]
            Object.defineProperty(obj, name, {
                set(v) {
                    value = v
                    callback(value)
                },
                get() {
                    return value
                }
            })
        },
        addWatch: function (data, name) {
            this.watch(data, name, function (v) {
                util.selAllAttr(vm.bindAttr + "=" + name).forEach(function (item) {
                    if (item.value != v) item.value = v;
                })
            });
        },
        addListener: function(attr) {
            util.selAllAttr(attr).forEach(function (item) {
                item.oninput = function () {
                    console.log(this,"oninput");
                    var attrVal = this.getAttribute(attr);
                    if (attrVal) vm.data[attrVal] = this.value;
                };
                item.onpropertychange = function () {
                    console.log(this,"onpropertychange");
                    var attrVal = this.getAttribute(attr);
                    if (attrVal) vm.data[attrVal] = this.value;
                };
                item.onchange = function () {
                    console.log(this,"onchange");
                    var attrVal = this.getAttribute(attr);
                    if (attrVal) vm.data[attrVal] = this.value;
                }
            });
        }
    };
    var util = {
        selAll: function (sel) {
            return document.querySelectorAll(sel);
        },
        selAllAttr: function (attr) {
            return document.querySelectorAll("[" + attr + "]");
        }
    }
    vm.init();
}

;layui.use(["form","rb"],function(form,rb) {
    var $ = layui.jquery;
    rb.log("page","init");
    form.on('submit(formDemo)', function(data) {
        var api = layui.cache.apiPath + 'login/ajax';
        // rb.log("form",data);
        $.post(api,data.field,function(da) {
            if('object' != typeof(da)){
                da = JSON.parse(da);
            }
            if(da.code!=0){
                rb.msg(da.msg,5);
            }else{
                layer.msg("登录成功",{icon:6,time:1000},function() {
                    rb.local("isLogin",true);
                    rb.local("uinfo",da.data.uinfo);
                    rb.local("sinfo",da.data.sinfo);
                    location.href = 'index.html';
                });
            }
        })
        return false;
    });
})